<style type="text/css">
.show-img{width: 300px;position: fixed;left: 50%;margin-left: -150px;top: 20%;z-index: 9;border-radius: 3px;display: none;}
.show-img h3{text-align: center;line-height: 30px;background: #2766ce;color: #fff;border-radius: 3px 3px 0px 0px;}
.show-img h3 span{float: right;width: 30px;height: 30px;line-height: 30px;margin-left: -30px;cursor: pointer;}
.show-img .show-img-info{background: #fff;padding: 10px;border-radius: 0px 0px 3px 3px;}
.show-img .show-img-info img{width: 280px;}

html .show-model{width: 100%;height: 100%;background: rgba(0,0,0,0.3);position:fixed;left: 0px;top: 0px;z-index: 8;display: none;}
</style>
<!--显示图片-->
<div class="show-img">
<h3>查看图片<span>X</span></h3>
<div class="show-img-info">
    <img src="" id="show-img" />
</div>
</div>
<!--模态框-->
<div class="show-model"></div>
<script type="text/javascript">
//显示图片
function _viewimg(jp){
    var str=jp.attr('src')?jp.attr('src'):'/'+jp.val();
    if(str){
        $('#show-img').attr('src',str);
        $('.show-img,.show-model').show();
    }
}
$('.show-img h3 span').click(function(){
    $('.show-img,.show-model').hide();
});
</script>